<template>
  <div :class="className" :style="{height:height,width:width}"/>
</template>

<script>
import echarts from 'echarts'

require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
import {queryStageMonthRangeCO2} from "@/api/carbon-manage/data";

const animationDuration = 6000

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    },
    curYear: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      chart: null,
      years: [],
      rangeData1: [],
      rangeData2: [],
      rangeData3: [],
      rangeData4: [],
    }
  },
  watch: {
    curYear(newVal, oldVal) {
      queryStageMonthRangeCO2({begin: newVal[0], end: newVal[1]}).then(res => {
        this.rangeData = res.data;
        this.rangeData1 = res.data[0].map(item => {
          return item.carbonEmission;
        });
        this.rangeData2 = res.data[1].map(item => {
          return item.carbonEmission;
        });
        this.rangeData3 = res.data[2].map(item => {
          return item.carbonEmission;
        });
        this.rangeData4 = res.data[3].map(item => {
          return item.carbonEmission;
        });
        this.years = res.data[0].map(item => {
          return item.year;
        });
        this.initChart();
      })
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    });

    queryStageMonthRangeCO2({begin: this.curYear[0], end: this.curYear[1]}).then(res => {
      this.rangeData = res.data;
      this.rangeData1 = res.data[0].map(item => {
        return item.carbonEmission;
      });
      this.rangeData2 = res.data[1].map(item => {
        return item.carbonEmission;
      });
      this.rangeData3 = res.data[2].map(item => {
        return item.carbonEmission;
      });
      this.rangeData4 = res.data[3].map(item => {
        return item.carbonEmission;
      });
      this.years = res.data[0].map(item => {
        return item.year;
      });
      this.initChart();
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')

      this.chart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function (params) {
            var relVal = params[0].name
            for (var i = 0, l = params.length; i < l; i++) {
              relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + params[i].value + '(tCO\u2082)'
            }
            return relVal
          }
        },
        grid: {
          top: 10,
          left: '2%',
          right: '2%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: this.years,
          axisTick: {
            alignWithLabel: true
          }
        }],
        yAxis: [{
          type: 'value',
          axisTick: {
            show: false
          }
        }],
        series: [{
          name: '化石燃料',
          type: 'bar',
          stack: 'vistors',
          barWidth: '60%',
          data: this.rangeData1,
          animationDuration
        },
          {
            name: '电力热力',
            type: 'bar',
            stack: 'vistors',
            barWidth: '60%',
            data: this.rangeData2,
            animationDuration
          },
          {
            name: '工业生产',
            type: 'bar',
            stack: 'vistors',
            barWidth: '60%',
            data: this.rangeData3,
            animationDuration
          },
          {
            name: '固碳产品',
            type: 'bar',
            stack: 'vistors',
            barWidth: '60%',
            data: this.rangeData4,
            animationDuration
          },

        ]
      })
    }
  }
}
</script>
